<template>
  <el-card v-show="flag" class="box-card">
      <template #header>
        <div class="card-header">
          <div>
            <el-avatar
              :size="50"
              src="https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png"
            />
          </div>
          <div>
            <p>{{ arr.length ? arr[0].name : "" }}</p>
            <p>{{ arr.length ? arr[0].idCard : "" }}</p>
          </div>
          <el-button @click="close" class="button" text>X</el-button>
        </div>
      </template>
      <el-collapse v-model="activeNames" @change="handleChange">
        <el-collapse-item
          v-for="(item, index) in arr"
          :key="index"
          :name="index + 1 + ''"
        >
          <template #title>
            <p>
              {{ item.startTime.city }} → {{ item.endTime.city }} &nbsp;
              {{ item.car }}
            </p>
          </template>
          <div @click="track(item)">
            {{ item.car }}
          </div>
        </el-collapse-item>
      </el-collapse>
    </el-card>
</template>

<script setup>
defineProps({
    arr:{
        type:Array,
        required:true,
    }
})
</script>

<style>

</style>